<template>
    <view
        id="four"
        class="wrapper style3"
        style="background-image:url('https://picsum.photos/1920/1080')"
    >
        <view class="inner">
            <view class="align-center">
                <view class="h2">👋 友</view>
                <view class="actions">
                    <view class="fit shake shake-little" v-for="(item,index) in links" :key="index">
                        <view @click="copyNumHandle(item.url)" class="friends">
                            <view class="avatar">
                                <image lazy-load :lazy-load-margin="0" style="width: 100px; height: 100px;" :src="item.pic"></image>
                            </view>
                            <view class="userinfo">
                                <view class="name">{{ item.name }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {mapGetters} from 'vuex';

export default {
    computed: {
        ...mapGetters(['links']),
    },
    methods: {
        copyNumHandle(url) {
            uni.setClipboardData({
                data: url // data的值为你要复制的内容
            });
        }
    },
    created() {
        this.$store.dispatch('app/getFriendLinks')
    }
}
</script>

<style scoped lang="scss">
$width: 100px;
.actions {
    padding-left: 0 !important;

    .fit {
        width: $width;
        overflow: hidden;
        padding: 0 !important;
        margin-right: 10px;
        margin-bottom: 30px;
        border-radius: 5px;

        .friends {
            text-align: center;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;

            .avatar {
                height: $width;

                img {
                    object-fit: fill;
                    width: 100%;
                    height: 100%;
                }
            }

            .userinfo {
                width: 100%;
                background-color: #ffffff;
                color: #2e2e2e;
                font-size: .8rem;
                padding: .4rem;

                .name {
                    word-break: break-all;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
            }
        }
    }
}
.actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.fit:nth-child(3n) {
    margin-right: 0;
}
.fit:last-child {
    margin-right: 0;
}

@media (prefers-color-scheme: dark) {
    .actions .fit .friends .userinfo {
        background-color: #000;
        color: #fff9ec;
    }
}
</style>
